<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../static/css/creatorCenter.css" th:href="@{/css/creatorCenter.css}">
    <link rel="stylesheet" href="../static/css/iconfont.css" th:href="@{/css/iconfont.css}">
    <link rel="stylesheet" href="../static/css/creatorCenterMainPage.css" th:href="@{/css/creatorCenterMainPage.css}">

    <title>导航栏示例</title>
</head>

<body>
<div class="main">
<div class="nav-container">
    <div class="user-info">
        <img th:src="${user.avatar}" alt="头像" class="level-icon">
        <h3 class="username" th:text="${user.username}">问安</h3>
        <span class="introduction" th:text="${user.bio}">一句话介绍你自己</span>
        <button class="create-content-btn write-article">写文章</button>
        <button class="create-content-btn write-thought">写想法</button>
        <button class="create-content-btn write-vedio">发视频</button>
        <div class="write-thought2" style="display: none;">

            <form id="thoughtForm" th:action="@{/thought/add}" method="post">
                <div class="post-popup">
                    <input type="number" name="code" style="display: none" class="none-input">
                    <input type="text" id="titleInput" placeholder="请输入标题 (选填)" maxlength="50" name="title">
                    <div class="char-count" id="titleCharCount">0/50</div>
                    <textarea id="contentTextarea" placeholder="分享你此刻的想法..." name="content"></textarea>
                    <div class="char-count char-count2" id="contentCharCount">0/300</div>

                    <button id="postButton" type="submit">发布</button>
                    <div class="close-icon" id="closeButton">&times;</div>
                </div>
            </form>

        </div>
    </div>
    <nav>
        <ul class="nav-links">
<!--            <li class="nav-item">-->
<!--                <a href="#" class="nav-link" style="background-color: #f3f6f9">-->
<!--                    <i class="iconfont">&#xe660;</i>-->
<!--                    主页-->
<!--                </a>-->
<!--            </li>-->
<!--            <li class="nav-item has-submenu">-->
<!--                <a href="#" class="nav-link">-->
<!--<i class="iconfont">&#xe659;</i>-->
<!--                  账号管理-->
<!--                </a>-->

<!--            </li>-->
<!--            <li class="nav-item has-submenu content-manage">-->
<!--                <a href="#" class="nav-link">-->
<!--                    <i class="iconfont">&#xe61a;</i>-->
<!--                    内容管理-->
<!--                </a>-->

<!--            </li>-->
<!--            <li class="nav-item has-submenu">-->
<!--                <a href="#" class="nav-link">-->
<!--                    <img src="https://via.placeholder.com/20" alt="数据分析图标" class="icon">-->
<!--                    数据分析-->
<!--                </a>-->

<!--            </li>-->
        </ul>
    </nav>
</div>
<div class="right">
    <header>
        <nav>
            <ul class="nav-tabs">
                <li class="active"><a href="#">视频</a></li>



            </ul>
            <span class="date" th:text="${time}"></span>
        </nav>
    </header>
    <main>
        <section class="data-overview">
            <h2>数据总览</h2>

            <div class="data-section">
                <div class="traffic">

                    <div class="data">
                        <div class="metric">

                            <span class="label">

                                浏览总量</span>

                            <p class="value" th:text="${videosViewNum}"></p>

                        </div>

                    </div>
                </div>
                <div class="interaction">

                    <div class="data">

                        <div class="metric">
                            <span class="label">
                                <i class="iconfont">&#xe610;</i>
                                喜欢总量</span>
                            <p class="value" th:text="${videosLikeNum}"></p>

                        </div>
                        <div class="metric">
                            <span class="label">
                                <i class="iconfont">&#xe6ad;</i>
                                评论总量</span>
                            <p class="value" th:text="${videosCommentNum}"></p>

                        </div>

                        <div class="metric">
                            <span class="label">
                                <i class="iconfont">&#xe6d4;</i>
                                分享总量</span>
                            <p class="value" th:text="${videosShareNum}"></p>

                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
    <header class="article-header">
        <nav>
            <ul class="nav-tabs">
                <li class="active"><a href="#">文章</a></li>



            </ul>
            <span class="date"  th:text="${time}"></span>
        </nav>
    </header>
    <main>
        <section class="data-overview">
            <h2>数据总览</h2>

            <div class="data-section">
                <div class="traffic">

                    <div class="data">
                        <div class="metric">

                            <span class="label">

                                浏览总量</span>

                            <p class="value" th:text="${articleViewNum}"></p>

                        </div>

                    </div>
                </div>
                <div class="interaction">

                    <div class="data">

                        <div class="metric">
                            <span class="label">
                                <i class="iconfont">&#xe610;</i>
                                喜欢总量</span>
                            <p class="value" th:text="${articleLikeNum}"></p>

                        </div>
                        <div class="metric">
                            <span class="label">
                                <i class="iconfont">&#xe6ad;</i>
                                评论总量</span>
                            <p class="value" th:text="${articleCommentNum}"></p>

                        </div>

                        <div class="metric">
                            <span class="label">
                                <i class="iconfont">&#xe6d4;</i>
                                分享总量</span>
                            <p class="value" th:text="${articleShareNum}"></p>

                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>
</div>
</div>
<div class="mask"></div>
<script th:inline="javascript">

    let articleLikeNum = [[${user}]];
    console.log(articleLikeNum)
    let write_article=document.getElementsByClassName('write-article')[0]
    write_article.addEventListener('click',()=>{
        window.location.href='/postArticle'
    })
    let write_vedio=document.getElementsByClassName('write-vedio')[0]
    write_vedio.addEventListener('click',()=>{
        window.location.href='/vedio'
    })
    // let content_manage=document.getElementsByClassName('content-manage')[0]
    // content_manage.addEventListener('click',()=>{
    //     event.preventDefault();
    //     window.location.href='/toManageMyPosts'
    // })
    document.addEventListener('DOMContentLoaded', function() {
        const pathname = window.location.pathname;
        let temp = 0;
        if (pathname === '/mainPageRecommend') {
            temp = 1

            document.getElementsByClassName('none-input')[0].value = temp
        } else if (pathname === '/mainPageAttention') {
            temp = 2
            document.getElementsByClassName('none-input')[0].value = temp
        } else if (pathname === '/mainPageTrending') {
            temp = 3
            document.getElementsByClassName('none-input')[0].value = temp
        }
        let result = [[${result}]];
        let errorMessage = [[${errorMessage}]];
        console.log(result)
        if (result && result !== '') {
            showCustomAlert(result, 3000);
        }
        if (errorMessage && errorMessage !== '') {
            showCustomAlert(errorMessage, 3000);
        }
        })

    const mask=document.querySelector('.mask')
    const titleInput = document.getElementById('titleInput');
    const titleCharCount = document.getElementById('titleCharCount');
    const contentTextarea = document.getElementById('contentTextarea');
    const contentCharCount = document.getElementById('contentCharCount');
    const closeButton = document.getElementById('closeButton');
    const writeThought=document.getElementsByClassName('write-thought2')[0]
    const writeThought_button=document.getElementsByClassName('write-thought')[0]
    // 标题字数统计
    titleInput.addEventListener('input', function () {
        const charCount = titleInput.value.length;
        titleCharCount.textContent = charCount + '/50';
    });
    contentTextarea .addEventListener('input',function(){
        const charCount=contentTextarea.value.length
        contentCharCount.textContent=charCount+'/300'
    })

    closeButton.addEventListener('click',()=>{
        console.log(closeButton)
        writeThought.style.display='none'
        contentTextarea.value=''
        titleInput.value=''
        document.body.classList.remove('open')
        mask.style.display='none'
    })
    writeThought_button.addEventListener('click',()=>{
        writeThought.style.display='block'
        mask.style.display='block'

        document.body.classList.add('open')
    })

    function showCustomAlert(message, duration) {
        let customAlert = document.getElementById('customAlert');
        if (!customAlert) {
            div_outter=document.createElement('div');
            customAlert = document.createElement('div');
            customAlert.id = 'customAlert';
            // customAlert.style.margin='7px 12px';
            const alertMessage = document.createElement('p');
            alertMessage.id = 'alertMessage';
            customAlert.appendChild(alertMessage);

            document.body.appendChild(customAlert);
        }

        const alertMessage = document.getElementById('alertMessage');

        alertMessage.textContent = message;
        if(alertMessage.textContent==null){
            customAlert.style.display = 'none';
        }

        customAlert.style.display = 'block';
        setTimeout(() => {
            customAlert.style.display = 'none';
        }, duration);
    }

    document.addEventListener('DOMContentLoaded', function() {
        const pathname = window.location.pathname;
        let temp = 0;
        if (pathname === '/mainPageRecommend') {
            temp = 1

            document.getElementsByClassName('none-input')[0].value = temp
        } else if (pathname === '/mainPageAttention') {
            temp = 2
            document.getElementsByClassName('none-input')[0].value = temp
        } else if (pathname === '/mainPageTrending') {
            temp = 3
            document.getElementsByClassName('none-input')[0].value = temp
        }else if (pathname === '/creativeCenter') {
            temp=4
            document.getElementsByClassName('none-input')[0].value = temp
        }else if (pathname === '/toManageMyPosts') {
            temp=5
            document.getElementsByClassName('none-input')[0].value = temp
        }
        let result = [[${result}]];
        let errorMessage = [[${errorMessage}]];
        console.log(result)
        console.log( document.getElementsByClassName('none-input')[0])
        if (result && result !== '') {
            showCustomAlert(result, 3000);
        }
        if (errorMessage && errorMessage !== '') {
            showCustomAlert(errorMessage, 3000);
        }
    })
</script>
</body>

</html>